<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
      <el-form-item label="菜单名称" prop="menuName">
        <el-input v-model="form.menuName" autocomplete="off" />
      </el-form-item>

      <el-form-item label="菜单路径" prop="url">
        <el-input v-model="form.url" autocomplete="off" />
      </el-form-item>

      <el-form-item label="打开方式" prop="target">
        <el-select v-model="form.target" placeholder="请选择" style="width: 100%">
          <el-option v-for="item in targetList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="菜单类型" prop="menuType">
        <el-select v-model="form.menuType" placeholder="请选择" style="width: 100%">
          <el-option v-for="item in menuTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="图标">
        <el-input v-model="form.icon" autocomplete="off" />
      </el-form-item>

      <el-form-item label="菜单排序">
        <el-input v-model="form.orderNum" autocomplete="off" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { doEdit, doAdd } from '@/api/router'

  export default {
    name: 'MenuManagementEdit',
    data() {
      return {
        form: {
          parentId: 0,
          visble: 0,
          orderNum: 0,
        },
        rules: {
          menuName: [{ required: true, trigger: ['blur', 'change'], message: '请输入菜单名称' }],
          url: [{ required: true, trigger: ['blur', 'change'], message: '请输入菜单路径' }],
          target: [{ required: true, trigger: ['blur', 'change'], message: '请选择打开方式' }],
          menuType: [{ required: true, trigger: ['blur', 'change'], message: '请选择菜单类型' }],
        },
        targetList: [
          { value: 'menuItem', label: '当前页面' },
          { value: 'menuBlank', label: '新窗口' },
        ],
        menuTypeList: [
          { value: 'M', label: '目录' },
          { value: 'C', label: '菜单' },
          { value: 'F', label: '按钮' },
        ],
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {},
    methods: {
      setOrderNum(index, parentId = 0) {
        this.form.orderNum = index
        this.form.parentId = parentId
      },
      showEdit(row) {
        if (!row) {
          this.title = '添加'
        } else {
          this.title = '编辑'
          this.form = Object.assign({}, row)
        }
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            let res = ''
            console.info('String(this.form.menuId)  ----->  ', String(this.form.menuId))
            if (String(this.form.menuId) == 'undefined') {
              res = await doAdd(this.form)
            } else {
              // 编辑时候 为顶级不传id
              if (this.form.parentld == 0) delete this.form.parentld
              res = await doEdit(this.form)
            }
            this.$baseMessage(res.msg, 'success')
            this.$emit('fetch-data')
            this.close()
          } else {
            return false
          }
        })
      },
    },
  }
</script>
